<script setup>
import { useOperate } from '@/stores/operate'
import role from './components/role/role.vue'
import user from './components/user/user.vue'
import Structure from './components/village/structure.vue'
import Notice from './components/village/notice.vue'
import Revitalization from './components/village/revitalization.vue'

const operateState = useOperate()
// 类型状态
</script>

<template>
  <div class="flex h-full w-full items-center justify-center">
    <div class="dialog_border text-[--main]">
      <h3 class="mb-[20px] text-center font-bold">
        {{ operateState.$state.typeObj[operateState.$state.type] }}
      </h3>
      <div>
        <role v-if="operateState.$state.name === 'role'" />
        <user v-if="operateState.$state.name === 'user'" />
        <structure v-if="operateState.$state.name === 'structure'" />
        <notice v-if="operateState.$state.name === 'notice'" />
        <revitalization v-if="operateState.$state.name === 'revitalization'" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.dialog_border {
  padding: 28px;
  background: #0d1a2a;
  box-shadow: inset 0 0 10px 0 #1f4b77;
  border-radius: 8px;
  border: 1px solid #2df2ff;
  backdrop-filter: blur(10px);
}
</style>
